<template>
  <div :class="['todo-item',todo.completed?'completed':'']">
    <input type="checkbox" v-model="todo.completed"/>
    <label>{{todo.content}}</label>
    <button @click="delItem"></button>
  </div>
</template>
<script>
  export default {
    name: 'TodoItem',
    props:{
      todo:Object
    },
    methods:{
      delItem(){
        this.$emit('del',this.todo.id)
      }
    }
  }
</script>
<style lang="stylus" scoped>
@import '~styles/theme.styl'
@import '~styles/mixins.styl'
.todo-item
  display:flex
  justify-content:space-between
  padding:10px
  font-size:24px
  border-top:1px solid rgba(0,0,0,.1)

  &:hover
    button:after
      content: 'x'
      color:$lightred
      font-size:24px
  &.completed
    label
      color:#d9d9d9
      text-decoration: line-through

  input
    width:50px
    height:30px
    text-align:center
    cleanDefaultStyle()
    &:after
      width:100%
      content:url('~images/uncheck.svg')
    &:checked:after
        content:url('~images/check.svg')
  label
    flex:1
    transition:color .4s

  button
    cleanDefaultStyle()
    width:40px
    background-color:transparent
    cursor:pointer
</style>